<script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue';
import { reqAllUser, reqCity, reqAddUser, reqEditUser, reqDeleteUser } from '@/api/user.ts'
import type { CascaderProps, FormInstance } from 'element-plus'
import type { patientInfo } from '@/api/type.ts'
import Visitor from '@/components/Visitor.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const formRef = ref<FormInstance>()

const showType = ref('show') // 控制显示页面是 添加add还是修改edit还是展示show
const changeShowType = (type: string, user?: any) => {
    showType.value = type
    if (type === 'edit') {
        userFormData.value = user
    } else {
        userFormData.value = {} as UserForm
    }
}

interface patientItem {

}
const patientList = ref<patientInfo[]>([]);
const getAllPatient = async () => {
    const res = await reqAllUser()
    // console.log(res)
    patientList.value = res.data
}
watch(showType, (newVal) => {
    // console.log(newVal)
    if (newVal === 'show') {
        getAllPatient()
    }
}, {
    immediate: true,
})

// 表单提交所需要的数据类型
interface UserForm {
    address: string,
    addressSelected: [],
    birthdate: string,
    certificatesNo: string,
    certificatesType: string,
    contactsCertificatesNo: string,
    contactsCertificatesType: string,
    contactsName: string,
    contactsPhone: string,
    id: number,
    isInsure: number,
    isMarry: number,
    name: string,
    phone: string,
    sex: number,
}
const userFormData = ref({} as UserForm)


const props: CascaderProps = {
    lazy: true,
    async lazyLoad(node: any, resolve: any) {
        // const { level } = node
        let res: any = await reqCity(node.data.id || '86')
        const nodes = res.data.map((item: any) => ({
            id: item.id,
            value: item.value,
            label: item.name,
            leaf: !item.hasChildren,
        }))
        resolve(nodes)
    },
}


const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            // console.log('submit!')
            // 调用接口
            if (showType.value === 'add') {
                const res = await reqAddUser(userFormData.value)
            } else {
                await reqEditUser(userFormData.value)
            }
            if (router.currentRoute.value.query.type === 'add' || router.currentRoute.value.query.type === 'edit') {
                router.go(-1)
                return
            }
            changeShowType('show')
            getAllPatient()
        } else {
            // console.log('error submit!')
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

// const updateUserFun = async (id: number) => {
//     // await reqEditUser(id)
//     getAllPatient()
// }
onMounted(async () => {
    if (router.currentRoute.value.query.type === 'add') {
        changeShowType('add')
    } else if (router.currentRoute.value.query.type === 'edit') {
        const id = Number(router.currentRoute.value.query.id)
        await getAllPatient()
        const user = patientList.value.find((item: any) => item.id === id)
        // console.log(patientList.value, 'iyfiy', user)
        if (user) {
            changeShowType('edit', user)
        }
    }
})

</script>

<template>
    <div class="patients-manage">
        <h3>就诊人管理
            <el-button type="primary" v-if="showType === 'add' || 'edit'"
                @click="changeShowType('show')">管理就诊人</el-button>
            <el-button type="primary" v-if="showType === 'show'" @click="changeShowType('add')">添加就诊人</el-button>
        </h3>
        <div class="patientList-box" v-if="showType === 'show'">
            <Visitor v-for="(item) in patientList" :key="item.id" :onePatient="item" @getAllPatient="getAllPatient"
                @changeShowType="changeShowType">
            </Visitor>
        </div>
        <div class="add-patient-box" v-else>
            <el-form :model="userFormData" label-width="auto" label-position="left" ref="formRef">
                <el-divider content-position="left">就诊人信息</el-divider>
                <el-form-item label="用户姓名" prop="name">
                    <el-input v-model="userFormData.name" />
                </el-form-item>
                <el-form-item label="证件类型" prop="certificatesType">
                    <el-select v-model="userFormData.certificatesType">
                        <el-option label="身份证" value="10" />
                        <el-option label="户口本" value="20" />
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码" prop="certificatesNo">
                    <el-input v-model="userFormData.certificatesNo" />
                </el-form-item>
                <el-form-item label="用户性别" prop="sex">
                    <el-radio-group v-model="userFormData.sex">
                        <el-radio border :value="1">男</el-radio>
                        <el-radio border :value="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthdate">
                    <el-date-picker v-model="userFormData.birthdate" type="date" aria-label="Pick a date"
                        placeholder="Pick a date" style="width: 100%" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="userFormData.phone" />
                </el-form-item>
                <el-divider content-position="left">建档信息 （完善后部分医院首次就诊不排队建档）</el-divider>
                <el-form-item label="婚姻状况" prop="isMarry">
                    <el-radio-group v-model="userFormData.isMarry">
                        <el-radio border :value="1">已婚</el-radio>
                        <el-radio border :value="0">未婚</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="自费/医保" prop="isInsure">
                    <el-radio-group v-model="userFormData.isInsure">
                        <el-radio border :value="1">自费</el-radio>
                        <el-radio border :value="0">医保</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="当前的住址">
                    <el-cascader :props="props" />
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="userFormData.address" />
                </el-form-item>
                <el-divider content-position="left">联系人信息（选填）</el-divider>
                <el-form-item label="用户姓名" prop="contactsName">
                    <el-input v-model="userFormData.contactsName" />
                </el-form-item>
                <el-form-item label="证件类型" prop="contactsCertificatesType">
                    <el-select v-model="userFormData.contactsCertificatesType">
                        <el-option label="身份证" value="10" />
                        <el-option label="户口本" value="20" />
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号码" prop="contactsCertificatesNo">
                    <el-input v-model="userFormData.contactsCertificatesNo" />
                </el-form-item>
                <el-form-item label="手机号码" prop="contactsPhone">
                    <el-input v-model="userFormData.contactsPhone" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
                    <el-button @click="resetForm(formRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<!-- <style lang="scss" scoped>
.patients-manage {
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    h3 {
        border-bottom: 1px solid var(--border-color);
        padding: 20px 0;
        font-size: 16px;
        position: relative;

        .el-button {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            right: 4px;

        }
    }

    .patientList-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 20px;
    }

    .add-patient-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;

        .el-form {
            width: 100%;

            .el-form-item {
                width: 500px;
                margin: 20px auto;
            }
        }
    }
}
</style> -->